<template>
	<div id="ArtistIntro">
		<x-header :left-options="{showBack: false}" title="艺术家简介" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="content">
			<div class="rank">
				<div class="left">
					<b>邵斌</b>
					<div class="honor">
						<span>国家级</span>
						<img src="../assets/images/home/icon_honor.png" alt="" />
					</div>
				</div>
				<div class="sign">
					<span>国画艺术家</span><span>2018-07-24入驻艺术家库</span>
				</div>
				<div class="right">
					<img src="../assets/images/home/defaultImg.jpg" alt="" />
				</div>
			</div>
			<div class="intro">
				<div class="title">个人简介</div>
				<div class="brief">
					作为一位文学史和艺术史的学者和 教师，我觉得写一本大师评传是个人义不容辞的责任。追溯并体味每一位大师的生命历程、情感天地和卓越创造，然后生动有趣、流畅自然而且翔实可靠地为大师们立传写心、摹状传神，这是该书的题中应有之意。从1995年秋开始，我陆续选择了一些诗书画俱绝的艺术大师作为传主，先后写作了顾恺之等人的传记。
				</div>
				<p>作品 <b> 23 </b> 奖项 <b> 32 </b><span>核雕艺术品</span><span>核雕艺术品</span></p>
			</div>
			<div class="artList">
				<h2>艺术作品 32</h2>
				<ul>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
						<p>单一色调中时而又透漏出多彩的手艺，溢于言表</p>
					</li>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
						<p>单一色调中时而又透漏出多彩的手艺，溢于言表</p>
					</li>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
						<p>单一色调中时而又透漏出多彩的手艺，溢于言表</p>
					</li>
					<li>
						<img src="../assets/images/home/defaultImg.jpg" alt="" />
						<p>单一色调中时而又透漏出多彩的手艺，溢于言表</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import { XHeader } from 'vux'
	export default {
		data() {
			return {

			}
		},
		components: {
			XHeader
		},
		methods: {
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.content .rank {
		height: 2.26rem;
		padding: 0 0.26rem;
		overflow: hidden;
		background: #fff;
		position: relative;
	}
	
	.content .rank .left,
	.content .rank .sign {
		float: left;
		width: 7.28rem;
		overflow: hidden;
	}
	
	.content .rank .left b {
		font-size: 0.45rem;
		color: #333;
		font-weight: normal;
		float: left;
		height: 0.7rem;
		line-height: 0.7rem;
	}
	
	.content .rank .left .honor {
		float: left;
		width: 1.48rem;
		height: 0.58rem;
		position: relative;
		margin-top: 0.16rem;
		margin-left: 0.34rem;
	}
	
	.content .rank .left .honor img {
		width: 100%;
	}
	
	.content .rank .left .honor span {
		position: absolute;
		right: 0.17rem;
		font-size: 0.29rem;
		color: #ee4b00;
		line-height: 0.46rem;
	}
	
	.content .rank .right {
		position: absolute;
		right: 0.26rem;
	}
	
	.content .rank .right img {
		width: 1.78rem;
		height: 1.78rem;
		border-radius: 50%;
	}
	
	.content .rank .sign {
		margin-top: 0.37rem;
		line-height: 0.56rem;
		height: 0.56rem;
	}
	
	.content .rank .sign span {
		font-size: 0.37rem;
		color: #333;
		margin-right: 0.33rem;
	}
	
	.content .intro {
		background: #fff;
		overflow: hidden;
		padding: 0 0.26rem 0.4rem;
		font-size: 0.32rem;
		line-height: 0.48rem;
	}
	
	.content .intro .title {
		float: left;
		width: 0.9rem;
		text-align: center;
	}
	
	.content .intro .brief {
		float: right;
		width: 90%;
	}
	
	.content .intro p {
		width: 100%;
		float: left;
		margin-top: 0.9rem;
		font-size: 0.32rem;
		overflow: hidden;
		color: #777;
	}
	
	.content .intro p b {
		font-size: 0.37rem;
		color: #333;
		font-weight: normal;
		margin-right: 0.61rem;
	}
	
	.content .intro p span {
		float: right;
		margin-left: 0.26rem;
		font-size: 0.26rem;
		background: #eee;
		display: inline-block;
		height: 0.5rem;
		line-height: 0.5rem;
		padding: 0 0.13rem;
		border-radius: 0.05rem;
	}
	
	.content .artList {
		margin-top: 0.26rem;
		padding: 0 0.26rem;
		background: #fff;
	}
	
	.content .artList h2 {
		font-size: 0.4rem;
		color: #333;
		height: 1.17rem;
		line-height: 1.17rem;
	}
	
	.content .artList ul {
		overflow: hidden;
	}
	
	.content .artList ul li {
		float: left;
		width: 4.61rem;
		margin-right: 0.24rem;
		margin-bottom: 0.53rem;
	}
	
	.content .artList ul li:nth-child(2n) {
		margin-right: 0;
	}
	
	.content .artList ul li img {
		width: 4.61rem;
		height: 3.06rem;
	}
	
	.content .artList ul li p {
		margin: 0 0.14rem;
		line-height: 0.56rem;
		font-size: 0.37rem;
		height: 1.12rem;
		overflow: hidden;
	}
</style>